<template>
  <div>
    <el-dialog :visible.sync="show" width="80%" title="新增质检工单" @close="closeDialog">
      <el-form :inline="true" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="工单号">
              <el-input v-model="form.fOrderNo" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="MES工单号">
              <div style="display: flex;gap: 12px;">
                <el-input v-model="form.fMesNo":disabled="form.fIsMes" ></el-input>
                <el-checkbox label="不绑定工单号"  v-model="form.fIsMes" @change="handleCheckboxChange"></el-checkbox>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工单优先级" prop="fOrderPriority">
              <el-select v-model="form.fOrderPriority" placeholder="请选择">
                <el-option label="紧急" value="0"></el-option>
                <el-option label="高" value="1"></el-option>
                <el-option label="中" value="2"></el-option>
                <el-option label="低" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="工单名称" prop="fOrderName">
              <el-input v-model="form.fOrderName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属工厂" prop="fOrgId">
              <el-select v-loadmore="factoryLoad" v-model="form.fOrgId" placeholder="请选择" @change="changeFactory">
                <el-option v-for="(item, index) in factoryList" :key="index" :label="item.fOrgName"
                  :value="item.fId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属设备" prop="fDeviceId">
              <el-select v-loadmore="deviceLoad" v-model="form.fDeviceId" placeholder="请选择">
                <el-option v-for="(item, index) in deviceList" :key="index" :label="item.fDeviceName"
                  :value="item.fId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="客户" prop="fClientName">
              <el-select v-loadmore="clientLoad" v-model="form.fClientName" placeholder="请选择">
                <el-option v-for="(item, index) in clientList" :key="index" :label="item.fClientCode"
                  :value="item.fId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人" prop="fUserId">
              <el-select v-loadmore="userLoad" v-model="form.fUserId" placeholder="请选择">
                <el-option v-for="(item, index) in userList" :key="index" :label="item.nickName"
                  :value="item.userId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品" prop="fProductId">
              <div @click="openProduct" class="el-input-div">{{ product.fProductName }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="模组类型" prop="fModuleType">
              <el-input :value="product.wfModuleColor ? product.wfModuleColor.fModuleName : ''" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="尺寸">
              <el-input v-model="product.fProductSize" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品型号">
              <el-input v-model="product.fDeviceModel" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="波形名称">
              <el-input :value="product.wfWaveForm ? product.wfWaveForm.fWaveName : ''" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品批次" prop="fProductBatchNo">
              <el-select v-model="form.fProductBatchNo" placeholder="请选择">
                <el-option v-for="(item, index) in batchList" :key="index" :label="item.fBatchNo"
                  :value="item.fEntryId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="托盘规格" prop="fTraySpecofocatopns">
              <el-select v-model="form.fTraySpecofocatopns" placeholder="请选择">
                <el-option label="6片" value="6片"></el-option>
                <el-option label="5片" value="5片"></el-option>
                <el-option label="4片" value="4片"></el-option>
                <el-option label="3片" value="3片"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="交付日期" prop="fPayDate">
              <el-date-picker v-model="form.fPayDate" type="date" value-format="yyyy-MM-dd"
                placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form.fRemark"
                style="max-width: 1200px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-button type="primary" @click="addSession">新增任务</el-button><br>
        <el-table :data="form.wfOrderTaskList" style="margin-top: 20px;">
          <el-table-column label="编号" type="index" width="120" />
          <el-table-column label="任务名称" prop="fTaskName" :show-overflow-tooltip="true" align="center" />
          <el-table-column label="温度段" prop="fHeatStageCollection" :show-overflow-tooltip="true" align="center" />
          <el-table-column label="温箱总静置时间(分钟)" prop="fQuietMinuteCollection" :show-overflow-tooltip="true"
            align="center" />
          <el-table-column label="测试总托盘数" prop="fTextNumCollection" :show-overflow-tooltip="true" align="center" />
          <el-table-column label="逻辑设置" prop="roleKey" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="showBialog4(scope.$index)">设置</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="text" @click="editTask(scope.$index)">编辑</el-button>
              <el-button type="text" @click="delTask(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="toSure">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog type="primary" :visible.sync="dialoge4" width="60%" append-to-body>
      <el-form ref="form" :model="form" label-width="250" v-if="dialoge4">
        <el-form-item label="请选择测试结束方式">
          <el-radio-group v-model="form.wfOrderTaskList[taskSettingKey].fLogicalSettings"
            @change="form.wfOrderTaskList[taskSettingKey].fEndTestNum = null">
            <el-radio :value="0" label="0" style="font-size: 12px; padding: 8px 10px;">所有测试样品执行完毕后结束</el-radio><br />
            <el-radio :value="1" label="1" style="font-size: 12px; padding: 8px 10px;"
              size="medium">测试样品执行到有NG的数据即可结束</el-radio><br />
            <el-radio :value="2" label="2" size="medium" style="font-size: 12px; padding: 8px 10px;">测试样品执行到
              <el-input size="mini" v-model="form.wfOrderTaskList[taskSettingKey].fEndTestNum" placeholder="请输入"
                style="width: 80px;"></el-input>次NG即可结束测试
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialoge4 = false">取 消</el-button>
        <el-button type="primary" @click="dialoge4 = false">确 定</el-button>
      </div>
    </el-dialog>
    <Product ref="product" @sure="sureProduct"></Product>
    <Task ref="task" @sure="sureTask"></Task>
    <TaskAdd ref="taskAdd" @sure="sureTask"></TaskAdd>
  </div>
</template>

<script>
import { listOrg } from "@/api/basicData/factory"
import { listDevice } from "@/api/basicData/equipment"
import { listClient } from "@/api/basicData/customer"
import { listUser } from "@/api/system/user"
import { productNo, addOrder } from '@/api/workOrder/administration'
import Product from "./components/product.vue"
import Task from "./components/task.vue"
import TaskAdd from "./components/taskAdd.vue"
export default {
  name: "workOrder",
  components: {
    Product,
    Task,
    TaskAdd
  },
  data() {
    return {
      show: false,
      dialoge4: false,
      form: {
        fForbidStatus: 0,
        fOrderNo: '',
        fMesNo: '',
        fIsMes: false,
        fOrderPriority: '',
        fOrderName: '',
        fOrgId: '',
        fDeviceId: '',
        fClientName: '',
        fUserId: '',
        fProductId: '',
        fProductBatchNo: '',
        fTraySpecofocatopns: '',
        fPayDate: '',
        fRemark: '',
        fOrderType: 1,
        wfOrderTaskList: [

        ]
      },
      rules: {
        fOrderName: [{ required: true, message: '请填写工单名称', trigger: 'blur' }],
        fOrderPriority: [{ required: true, message: '请选择工单优先级', trigger: 'blur' }],
        fOrgId: [{ required: true, message: '请选择所属工厂', trigger: 'blur' }],
        fDeviceId: [{ required: true, message: '请选择所属设备', trigger: 'blur' }],
        fClientName: [{ required: true, message: '请选择客户', trigger: 'blur' }],
        fUserId: [{ required: true, message: '请选择负责人', trigger: 'blur' }],
        fProductId: [{ required: true, message: '请选择产品', trigger: 'blur' }],
        fProductBatchNo: [{ required: true, message: '请选择产品批次', trigger: 'blur' }],
        fTraySpecofocatopns: [{ required: true, message: '请选择托盘规格', trigger: 'blur' }],
        fPayDate: [{ required: true, message: '请选择交付日期', trigger: 'blur' }]
      },
      factoryWhere: { pageNum: 1, pageSize: 20 },
      deviceWhere: { pageNum: 1, pageSize: 20 },
      clientWhere: { pageNum: 1, pageSize: 20 },
      userWhere: { pageNum: 1, pageSize: 20 },
      factoryList: [],
      deviceList: [],
      clientList: [],
      userList: [],
      product: {},
      batchList: [],
      taskSettingKey: 0,
      editForm: {
        fTaskName: '',
        wfOrderTaskEntryList: []
      }
    }
  },
  methods: {
    open() {
      this.show = true
      this.getFactory()
      this.getClient()
      this.getUser()
    },
    handleCheckboxChange() {
      if (this.form.fIsMes) {
        this.form.fMesNo = '';
      }
    },
    getFactory() {
      listOrg(this.factoryWhere).then(res => {
        this.factoryList = [...this.factoryList, ...res.rows]
      })
    },
    changeFactory(e) {
      this.getDevices(e)
      this.form.fDeviceId = ''
    },
    getDevices(fOrgId) {
      this.deviceWhere.fOrgId = fOrgId
      listDevice(this.deviceWhere).then(res => {
        this.deviceList = res.rows
      })
    },
    getDevice() {
      listDevice(this.deviceWhere).then(res => {
        this.deviceList = [...this.deviceList, ...res.rows]
      })
    },
    getClient() {
      listClient(this.clientWhere).then(res => {
        this.clientList = [...this.clientList, ...res.rows]
      })
    },
    getUser() {
      listUser(this.userWhere).then(res => {
        this.userList = [...this.userList, ...res.rows]
      })
    },
    factoryLoad() {
      this.factoryWhere.pageNum += 1
      this.getFactory()
    },
    deviceLoad() {
      this.deviceWhere.pageNum += 1
      this.getDevice()
    },
    clientLoad() {
      this.clientWhere.pageNum += 1
      this.getClient()
    },
    userLoad() {
      this.userWhere.pageNum += 1
      this.getUser()
    },
    closeDialog() {
      this.factoryWhere.pageNum = 1
      this.deviceWhere.pageNum = 1
      this.clientWhere.pageNum = 1
      this.userWhere.pageNum = 1
      this.factoryList = []
      this.deviceList = []
      this.clientList = []
      this.userList = []
    },
    openProduct() {
      this.$refs.product.open()
    },
    sureProduct(e) {
      this.form.fProductBatchNo = ''
      this.form.fProductId = e.fId
      localStorage.setItem('productId', e.fId)
      console.log(e)
      this.product = e
      productNo({ fId: e.fId }).then(res => {
        this.batchList = res.rows
      })
    },
    sureTask(e) {
      var value = e.wfOrderTaskEntryList.map((item) => item.fHeatStage);
      var min = Math.min(...value)
      var max = Math.max(...value)
      let data = {
        ...e,
        fHeatStageCollection: min + '-' + max,
        fVsValueCollection: e.wfOrderTaskEntryList.map(item => item.fVsValue).toString(),
        fVcomValueCollection: e.wfOrderTaskEntryList.map(item => item.fVcomValue).toString(),
        fQuietMinuteCollection: e.wfOrderTaskEntryList.reduce((accumulator, currentValue) => accumulator + Number(currentValue.fQuietMinute), 0),
        fTextNumCollection: e.wfOrderTaskEntryList.reduce((accumulator, currentValue) => accumulator + Number(currentValue.fTextNum), 0)
      }
      console.log(this.taskSettingKey);
      if (this.taskSettingKey !== -1) {
        this.$nextTick(() => {
          this.$set(this.form.wfOrderTaskList, this.taskSettingKey, { ...data })
        })
      } else {
        this.form.wfOrderTaskList.push(data)
      }
    },
    addSession() {
      if(!this.product.fProductName){
        this.$message({
          message: '请先选择产品',
          type: 'warning'
        })
        return
      }
      this.taskSettingKey = -1
      this.$refs.taskAdd.open()
    },
    showBialog4(index) {
      this.taskSettingKey = index
      this.dialoge4 = true
    },
    delTask(index) {
      this.form.wfOrderTaskList.splice(index, 1)
    },
    editTask(index) {
      this.taskSettingKey = index
      this.$refs.taskAdd.form.fTaskName = this.form.wfOrderTaskList[index].fTaskName
      this.$refs.taskAdd.form.wfOrderTaskEntryList = [...this.form.wfOrderTaskList[index].wfOrderTaskEntryList]
      this.$refs.taskAdd.open()
      this.$refs.taskAdd.form.check = 0
    },
    toSure() {
      if (this.form.wfOrderTaskList.length < 1) {
        this.$message({
          message: '请添加任务',
          type: 'warning'
        })
        return
      }
      this.form.fIsMes = this.form.fIsMes ? 1 : 0
      addOrder(this.form).then(res => {
        this.show = false
        this.form = {
          fForbidStatus: 0,
          fOrderNo: '',
          fMesNo: '',
          fIsMes: false,
          fOrderPriority: '',
          fOrderName: '',
          fOrgId: '',
          fDeviceId: '',
          fClientName: '',
          fUserId: '',
          fProductId: '',
          fProductBatchNo: '',
          fTraySpecofocatopns: '',
          fPayDate: '',
          fRemark: '',
          fOrderType: 1,
          wfOrderTaskList: []
        }
        this.$message({ message: '提交成功', type: 'success' })
        this.$emit('success')
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-input-div {
  width: 202px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 15px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap; // 强制一行显示
  overflow: hidden; // 超出隐藏
  text-overflow: ellipsis; // 省略号
}
</style>
